<template>
	<u-popup v-model="visible" mode="bottom" height="800" closeable	mask safe-area-inset-bottom @open="handleOpenPopup" @close="handleCancel">
		<view class="address-selection-components">
            <view class="head-wrap">
                <text class="popup-title">请选择所在地区</text>
            </view>
			<u-tabs ref="tabs" :list="tabs" :name="nameKey" :current="tabIndex" @change="handleChangeTabs"></u-tabs>
			<swiper class="swiper-wrap" :current="swiperIndex" @change="handleChangeSwiper">
				<swiper-item v-for="(swiper, listIndex) in list" :key="listIndex">
					<scroll-view class="scroll-view" scroll-y>
						<view class="region-list">
							<view class="region-item" v-for="(region,regionIndex) in swiper" :key="regionIndex" @click="handleSelectChidren(listIndex,regionIndex,region)">
								<text class="region-name">{{ region[nameKey] }}</text>
								<u-icon v-if="tabs[listIndex][codeKey] == region[codeKey]" name="checkbox-mark" color="#2979ff" size="28"></u-icon>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</u-popup>
</template>

<script>
export default {
	name: 'address-selection',
	props: {
		show: {
			type: Boolean,
			default: false
		},
        nameKey: {
			type: String,
			default: 'name'
		},
        codeKey: {
        	type: String,
        	default: 'regionCode'
        },
		loadChildren: {
			type: Function
		}
	},
	data() {
		return {
			list: [], // 列表数据
			tabs: [], // 选中数据
            visible: false,
			tabIndex: 0, // 当前选中索引
			swiperIndex: 0,
			loading: false // 是否正在加载中
		};
	},
    watch: {
        show: {
        	deep: true,
        	immediate: true,
        	handler (val) {
        		this.visible = val;
        	}
        },
    },
	mounted() {
		this.handleInit();
	},
	methods: {
		// 初始化
		handleInit() {
			if (this.loadChildren) {
				this.handleGetChidren(-1,{});
			}
		},
		// 切换Tab
		handleChangeTabs(index) {
			if(this.tabIndex == index) return;
			this.tabId = this.tabs[index][this.codeKey];
			this.tabIndex = index;
			this.swiperIndex = index;
		},
		// 切换Swiper
		handleChangeSwiper(event){
			this.tabIndex = event.detail.current;
		},
		// 选中子数据
		handleSelectChidren(swiperIndex,regionIndex,region) {
			if(region[this.codeKey] == this.tabs[swiperIndex][this.codeKey]) return;
			this.handleGetChidren(swiperIndex,region);
		},
		// 获取子数据
		handleGetChidren(swiperIndex,region) {
			if (this.loadChildren) {
				uni.showLoading({title: '加载中...'});
				// 调用加载子数据方法
				this.loadChildren(region, children => {
					if(children.length){
						let index = swiperIndex + 1;
						let len = this.list.length;
						this.list.splice(index,len);
						this.tabs.splice(index,len);
						this.list[index] = children;
						this.tabs[swiperIndex] = region;
						this.tabs.push({ name: '请选择', no: true });
						this.$nextTick(() => {
							this.swiperIndex = index;
							this.handleChangeTabs(index);
						})
					}else {
						this.tabs[swiperIndex] = region;
                        this.handleConfirm();
					}
					this.$forceUpdate();
					uni.hideLoading();
				});
			}
		},
		// 确认事件
		handleConfirm(){
			let selects = this.tabs.filter(item => !item.no);
			this.$emit('confirm',selects);
			this.$emit('update:show', false);
		},
		// 取消事件
		handleCancel() {
			this.$emit('update:show', false);
			this.$emit('cancel', false);
		},
		// popup打开事件
		handleOpenPopup() {
			this.$nextTick(() => {
				this.$refs.tabs.init();
			});
		}
	}
};
</script>

<style scoped lang="scss">
.address-selection-components {
	width: 100%;
	height: 100%;
	display: flex;
	padding: 10rpx;
	flex-direction: column;
    .head-wrap{
        height: 70rpx;
        display: flex;
        flex-shrink: 0;
        padding: 0 20rpx;
        align-items: center;
        .popup-title{
            font-size: 32rpx;
            font-weight: bold;
        }
    }
	.swiper-wrap {
		height: 100%;
		.scroll-view{
			height: 100%;
		}
	}
	.region-list{
		display: flex;
		flex-direction: column;
		.region-item{
			display: flex;
			font-size: 30rpx;
			align-items: center;
			padding: 20rpx 32rpx;
			border-top: 2rpx solid #f5f5f5;
			justify-content: space-between;
		}
	}
}
</style>
